<template>
	<view>
		<view class="user-chat-bottom u-f-ac animated fadeInDown fast" :style="'display:'+isnone">
			<input type="text" placeholder="文明发言" :focus="focus" @blur="blur" v-model="text" />
			<view class="icon iconfont iconfabu u-f-ajc" @tap="submit"></view>
		</view>
		<view class="docTop">
			<view class="topbox">
				<view class="ty1">
					<view class="">简单粗暴任务，不实名不下载。</view>
					<view class="u-f u-f-ac"><text class="simtp">UI520221</text><text class="simtp">下载注册</text></view>
				</view>
				<view class="ty2">
					<view class="">+2.58</view>
					<view class="">+3.98</view>
				</view>
			</view>
			<view class="smsmsg u-f u-f-ac u-f-jsb">
				<view class="">18人已赚</view>
				<view class="">剩余10人</view>
				<view class="">48小时到账</view>
			</view>
			<view class="kiss">
				<view class="ki1 u-f u-f-ac u-f-l">
					<view class="avatarg u-f u-f-ac u-f-ajc">
						<image :src="urls" mode="aspectFill"></image>
					</view>
					<view class="avatarnr">
						<view class="avataruser u-f-ajc">
							<text>{{ysData.nickname}}</text><text>UD520221</text>
						</view>
						<view class="avaxxt">
							<text class="mas1">已实名</text> <text class="mas2">超级商人</text>
						</view>
						<view class="avatarys u-f-ajc">
							<text>{{ysData.yyname}}</text><text>{{ysData.department}}</text>
						</view>
					</view>
				</view>
				<view class="ki2 conts">
					<image src="../../static/icon/mjxx.svg" mode="aspectFill"></image>
					<view class="">联系商家</view>
				</view>
			</view>
		</view>
		<view class="ysmain">
			<view class="bclis">
				任务步骤
			</view>
			<view class="lets">
				<view class="nums">1</view>
				<view class="">
					<view class="letitle" >步骤一(图文说明)</view>
					<view class="letp">支付宝扫码进去直接领取红包，做过的别来了谢谢，后台有数据就过。</view>
				</view>
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<view class="uni-uploader__file">
							<image class="mrimg" src="https://wx.gzyz1.com/public/uploads/20200826114430_13804.jpg" :data-src="image11" @tap="previewImage1"  mode="aspectFill" ></image>
						</view>
						<block v-if="imgs" v-for="(image, index) in imageList" :key="index">
							<view class="uni-uploader__file">
								<view @tap="delimg(index)" class="icon iconfont iconshanchu"></view>
								<image class="uni-uploader__img" src="image" :src="image" :data-src="image" @tap="previewImage" mode="aspectFill"></image>
							</view>
						</block>
						<view v-if="imgs" class="uni-uploader__input-box"><view class="uni-uploader__input" @tap="chooseImage"></view></view>
					</view>
				</view>
			</view>
			<view class="lets">
				<view class="nums">2</view>
				<view class="">
					<view class="letitle" >步骤一(图文说明)</view>
					<view class="letp">支付宝扫码进去直接领取红包，做过的别来了谢谢，后台有数据就过。</view>
				</view>
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<view class="uni-uploader__file">
							<image class="mrimg" src="https://wx.gzyz1.com/public/uploads/20200826114430_13804.jpg" :data-src="image11" @tap="previewImage1"  mode="aspectFill" ></image>
						</view>
						<block v-for="(image, index) in imageList" :key="index">
							<view class="uni-uploader__file">
								<view @tap="delimg(index)" class="icon iconfont iconshanchu"></view>
								<image class="uni-uploader__img" src="image" :src="image" :data-src="image" @tap="previewImage" mode="aspectFill"></image>
							</view>
						</block>
						<view class="uni-uploader__input-box"><view class="uni-uploader__input" @tap="chooseImage"></view></view>
					</view>
				</view>
			</view>
		</view>
		<view class="ysmain hids">
			<view class="bclis">
				提交数据<text class="bpdi">请在下方填写做任务的数据</text>
			</view>
			<input class="names" type="text" value=""  placeholder="姓名" />
		</view>	
		<view class="bntbox">领取任务</view>
	</view>
</template>

<script>
	var sourceType = [['camera'], ['album'], ['camera', 'album']];
	var sizeType = [['compressed'], ['original'], ['compressed', 'original']];
	import {mapState} from 'vuex';//请求数据 mapState
	var yzyTime = require('../../common/util.js');
	export default {
		props: {
			focus: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				imageList: [],
				sourceType: ['拍照', '相册', '拍照或相册'],
				countIndex:1,
				count: [1],
				image11:'https://wx.gzyz1.com/public/uploads/20200826114430_13804.jpg',
				imgs:false,
				
				text: "",
				imgUrl:this.config.imgUrl,
				isnone: "none",
				ysData: [],
				newItems:[],
				comment:[],
				options:[],
				urls:'',
				couse:'0',
				isgzs:'0',
				}
		},
		onLoad(options){
			this.options=options;
			
		},
		onShow(){
			uni.removeStorageSync('doctorlist');
			this.ongrzlTap(this.options.id);
		},
		methods: {
			delimg(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(index, 1);
						}
					}
				});
			},
			chooseImage: async function() {
				if (this.imageList.length === 1) {
					return;
				}
				uni.chooseImage({
					count: 1, //默认9
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					success: res => {
						uni.showLoading({ mask: true,title: '正在加载' });  
						uni.uploadFile({
							url: this.config.webUrl+'/apip/user/imagepic', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: "file",
							dataType:"json",
							formData: {
								'token': uni.getStorageSync("userInfo").token,
								'uid': uni.getStorageSync("userInfo").id,
							},
							success: (uploadFileRes) => {
									uni.hideLoading();
								var dataarr=JSON.parse(uploadFileRes.data);
								if(dataarr.code==1){
									this.imageList = this.imageList.concat([this.config.imgUrl+dataarr.data]);
								}else{
									uni.showToast({
										title:dataarr.msg
									})
								}
							},
							complete(res) {
								//uni.hideLoading();
								console.log(res)
							}
						}); 
					}
				});
			},
			previewImage: function(e){
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.imageList
				});
			},
			previewImage1: function(e){
				console.log(e)
				var current = e.target.dataset.src;
				uni.previewImage({
					current: 1,
					urls: [current]
				});
			},
			
			async gzys() { //关注
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}else{
					let data = {id:this.options.id};
					data.token = uni.getStorageSync("userInfo").token;
					data.uid = uni.getStorageSync("userInfo").id;
					let [err,res] = await this.$http.post('/apip/user/gzys',data);
					if (!this.$http.errorCheck(err,res)) return;
					if(res.data.code == 1){
						this.$api.msg(res.data.msg);
						this.isgzs=1;
					}else if(res.data.code == 2){
						this.$api.msg(res.data.msg);
						this.isgzs=0;
					}else{
						this.$api.msg(res.data.msg);
					}
				}
			},
			async ongrzlTap(id){
				let data = {id:id};
				if(uni.getStorageSync("userInfo").id>0){
					data.uid = uni.getStorageSync("userInfo").id;
				}
				let [err,res] = await this.$http.get('/apip/index/doctorinfo',data);
				if (!this.$http.errorCheck(err,res)) return;
				if(res.data.code === 1){
					uni.setStorage({ //缓存医生信息
						key: 'doctorlist',  
						data: res.data.data
					})
					this.couse=res.data.data.couse;
					var str=res.data.data.doctor.headimgurl;
					if(str.indexOf("http") != -1){
						this.urls=str;
					}else{
						this.urls=this.config.imgUrl+str;
					}
					this.ysData=res.data.data.doctor;
					this.isgzs=res.data.data.doctor.isgzs;
					this.comment=res.data.data.plmsg?res.data.data.plmsg:[];
					this.setTime(res.data.data.article);
				}else{
					this.$api.msg(res.data.msg);
					this.logining = false;
				}
			},
			yzyon(updatetime){
				var updatetimes=yzyTime.yzyTime(updatetime);
				return yzyTime.dateUtils.format(updatetimes);
			},
			
			setTime(items) {
				var newItems = [];
				items.forEach(e => {
					var updatetimes=yzyTime.yzyTime(e.updatatime)
					var str=e.img;
					if(str.indexOf("http") != -1){
						var urls=e.img;
					}else{
						var urls=this.config.imgUrl+e.img;
					}
					newItems.push({
						author: e.author,
						img:urls,
						id: e.id,
						title: e.title,
						updatetime:yzyTime.dateUtils.format(updatetimes),
					});
				});
				this.newItems = newItems;
			}
		}
	}
</script>

<style>
	/* page {
		background: url(http://www.scgyly.com/images/ybg.svg);
		background-position: top center;
		background-repeat: no-repeat;
		background-size: 100%;
	} */
	.hids{
		padding-bottom: 200upx!important;
	}
	.names{
		width: 92%;
		margin: 0 auto;
		padding: 0upx 10upx;
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		color: #333;
		box-sizing: border-box;
		background: #f3f3f3;
		border-radius: 6upx;
	}
	.bpdi{
		font-size: 28upx;
		color: #999;
		padding-left: 20upx;
		box-sizing: border-box;
		font-weight: normal;
	}
	.bntbox{
		width: 100%;
		height: 40px;
		line-height: 40px;
		background: #FFB400;
		color: #333;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		text-align: center;
		font-size: 32upx;
	}
	.bntbox:active{
		background: #FFAC45;
		color: #fff;
	}
	.ysmain{
		padding-bottom: 40upx;
	}
	.uni-uploader__file {
		position: relative;
		margin: 4px!important;
	}
	.iconshanchu {
		z-index: 1;
		position: absolute;
		right: -10upx;
		top: -10upx;
		width: 46upx;
		height: 46upx;
		border-radius: 50%;
		line-height: 40upx;
		text-align: center;
		background: #ff1919;
		font-size: 24upx;
		color: #fff;
		border: 2px solid #fafafa;
	}
	.wdmstitleimg{
		padding: 8upx 0upx;
			padding-left: 50upx;
			font-size: 32upx;
			font-weight: 500;
			position: relative;
			border-bottom: 1upx solid #e5e5e5;
		}
		.wdmstitleimg text{
			color: #999;
			font-size: 28upx;
		}
		.wdmstitleimg:after {
			font-family: iconfont;
			position: absolute;
			top: 2px;
			left: 6px;
			content: '\e716';
			font-size: 36upx;
			color: #0077cc;
		}
	.conts{
		text-align: center;
		line-height: 20px;
		padding-top: 10upx;
		box-sizing: border-box;
	}
	.letitle{
		font-size: 32upx;
		color: #333;
		font-weight: bold;
		line-height: 24px;
	}
	.conts image{
		width: 24px;
		height: 20px;
	}
	.conts view{
		line-height:20px;
	}
	.avatarnr{
		padding-left: 10upx;
		box-sizing: border-box;
	}
	.avaxxt text{
		border-radius: 50upx;
		padding: 2upx 10upx;
		box-sizing: border-box;
	}
	.avataruser text{
		color: #111;
		font-size: 32upx;
		font-weight: bold;
	}
	.avaxxt .mas1{
		background: #FFAC45;
		font-size: 20upx;
		color: #fff;
		margin-right: 20upx;
	}
	.avaxxt .mas2{
		background: #FF4443;
		font-size: 20upx;
		color: #fff;
	}
	.ty1 view:nth-child(1){
		font-size: 32upx;
		color: #111;
		line-height: 46upx;
		font-weight: bold;
		text-align:justify;
		text-align-last: left;
	}
	.ty2 view:nth-child(1){
		color: #666;
		font-size: 32upx;
		font-weight: bold;
	}
	.ty2 view:nth-child(2){
		color: #F17503;
		font-size: 32upx;
		font-weight: bold;
	}
	.mrimg{
		width: 180upx;
		height: 180upx;
	}
	.simtp{
		font-size: 10px;
		color: #a1a1a1;
		background: #f8f8f8;
		padding: 2px 4px;
		border-radius: 2px;
		margin-right: 10upx;
	}
	.smsmsg{
		width: 94%;
		margin: 0 auto;
		border-bottom: 1px solid #e5e5e5;
	}
	.smsmsg>view{
		line-height: 80upx;
		color: #999;
	}
	.bclis{
		line-height: 50px;
		margin-top: 24upx;
		padding-left: 4%;
		border-top: 10px solid #e5e5e5;
		box-sizing: border-box;
		font-size: 32upx;
		font-weight: bold;
		color: #777;
	}
	.nums{
		background: #FFB400;
		color: #333;
		width: 45upx;
		height: 45upx;
		text-align: center;
		line-height: 45upx;
		border-radius: 50%;
		position: absolute;
		top: 0upx;
		left: 20upx;
	}
	.lets{
		width: 94%;
		margin: 0upx auto;
		padding-left: 80upx;
		position: relative;
		padding-bottom: 40upx;
		box-sizing: border-box;
	}
	.lets::before{
		content: '';
		width: 2upx;
		height: 100%;
		background: #eee;
		position: absolute;
		left: 43upx;
		top: 0;
	}
	.ysmain .lets:last-of-type::before{
		background: #fff!important;
	}
	.letp{
		text-align: justify;
		text-align-last: left;
		font-size: 28upx;
		color: #666;
		line-height: 40upx;
	}
	.topbox{
		width: 94%;
		margin: 0upx auto;
		margin-top: 20upx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-around;
		justify-content: space-around;
		-webkit-align-content: center;
		align-content: center;
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 20upx;
	}
	.kiss{
		width: 94%;
		margin: 0upx auto;
		margin-top: 20upx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-around;
		justify-content: space-around;
		-webkit-align-content: center;
		align-content: center;
	}
	.ty1{
		flex:4;
		padding-right: 20upx;
		box-sizing: border-box;
	}
	.ty2{
		flex:1;
		border-left: 1px solid #e5e5e5;
		padding-left: 10upx;
		box-sizing: border-box;
	}
	.ki1{
		flex:4;
		padding-right: 20upx;
		box-sizing: border-box;
	}
	.ki2{
		flex:1;
		padding-left: 10upx;
		box-sizing: border-box;
	}
	.ki2 view{
		color: #666;
	}
	.avatarg{
		text-align: center;
	}
	.avatarg image{
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
</style>
